<template>
  <div class="login-container">
    <div class="cont">
      <div class="lt">
          <!-- <img src="@/assets/images/logo_03.png" alt=""> -->
          <p class="font14">闪销是国内领先的互联网渠道合作平台，平台连接销售与产品供应商，由销售为供应商引荐客户，帮助供应商精准触达客户并促成交易，极大提升销售与供应商之间的合作效率和效果，实现共赢</p>
          <ul>
            <li><svg-icon  icon-class="phone"></svg-icon>021-20428221</li>
            <li><svg-icon  icon-class="email"></svg-icon>market@51shanxiao.com</li>
            <li><svg-icon  icon-class="dizhi"></svg-icon>上海市浦东新区碧波路690号7号楼6楼</li>
          </ul>
      </div>
      <div class="rt">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
          <div class="title-container">
            <h3 class="title"><span>闪销企业平台</span></h3>
          </div>

          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入您的管理账号" name="username" type="text" auto-complete="on" />
          </el-form-item>

          <el-form-item prop="password">
            <el-input :type="passwordType" v-model="loginForm.password" placeholder="请输入您的管理密码" name="password" auto-complete="on" @keyup.enter.native="handleLogin" />
            <!-- <span class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye" />
            </span> -->
          </el-form-item>
          <el-form-item prop="code" class="code">
            <el-input type="text" v-model="loginForm.code" placeholder="输入验证码" name="code" auto-complete="on"  />
            <button type="button" @click="getCode" :disabled="isActive || time > 0" class="codeClick">{{ text }}</button>
          </el-form-item>
          <span class="error_text">{{verificationCodeError}}</span>
          <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">马上登录</el-button>

        </el-form>
      </div>
    </div>
    <div class="fots"> 
        <img src="https://51shanxiao.com//images/er_07.jpg" alt="">
        <p><span>Copyright ©2019 上海沙仕汇信息科技有限公司</span> <span>沪ICP备-19039174</span></p>
    </div>   
  </div>
</template>

<script>
import {apigetCode} from '@/api/login'
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入您的管理账号"))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入您的管理密码"))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: "",
        password: "",
        code:""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      passwordType: "password",
      loading: false,
      showDialog: false,
      redirect: undefined,
      isActive:false,
      time:0,
      verificationCodeError:''
    }
  },
  computed: {
    text () {
      return this.time > 0 ? this.time + 's 后重获取' : '获取验证码';
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    validatorPhone(){
      if(this.loginForm.username == ''){
        return false
      }
      let pattern = /^((1[3,4,5,6,7,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
      if(this.loginForm.username.length != 11){
          this.verificationCodeError = '手机格式不正确'
          return false
        }else{
           if(pattern.test(this.loginForm.username))
           {
             this.verificationCodeError = ''
             return true;
           }
           else
           {
             this.verificationCodeError = '手机格式不正确'
             return false;
           }

        }
    },
    getCode(){
      var self=this;
      if(this.validatorPhone())
      {
        apigetCode(this.loginForm.username).then(res=>{
          if(res.result){
            this.time = 60
            this.isActive = true
            this.timer()
          }
          else{
            this.verificationCodeError = "手机号不存在！";
          }
        })
      }
    },
    timer(){
      if (this.time > 0) {
        this.time--
        setTimeout(this.timer, 1000)
      }else{
        this.isActive = false
        this.time = 0
      }
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = ""
      } else {
        this.passwordType = "password"
      }
    },
    // synchronizeRequest (url) {
    //   var flag = false
    //   var request = new XMLHttpRequest()
    //   request.open('GET', url, false) // 第三个参数 false 代表设置同步请求
    //   request.setRequestHeader('Accept', 'application/json')
    //   request.setRequestHeader('Content-Type', 'application/json')
    //   request.send(null)
    //   if (request.status === 200) {
    //     var result = JSON.parse(request.responseText)
    //     flag = result.data
    //   } else {
    //   }
    //   return flag
    // },
    // checkCode(){
    //   if (this.loginForm.code == '') {
    //     this.verificationCodeError = "验证码不能为空！";
    //     return false;
    //   }
    //   var url = "http://localhost:9090/"
    //   if(!this.synchronizeRequest(url+'checkCode?code=' + this.loginForm.code +"&cellPhone="+this.loginForm.username))
    //   {
    //     this.verificationCodeError="验证码不正确";
    //     return false;
    //   }
    //   this.verificationCodeError="";
    //   return true;
    // },
    handleLogin() {
      // if(this.checkCode()){
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.$store
              .dispatch("login", this.loginForm)
              .then(data => {
                this.$router.push({ path: "/" })
                this.loading = false
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        })
      // }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #283443;
$light_gray: #eee;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
    &::first-line {
      color: $light_gray;
    }
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    border-radius: 2px;
    width: 100%;
    input {
      -webkit-appearance: none;
      border-radius: 2px;
       border: solid 1px #dcdcdc;
      color: #333;
      height: 50px;
      &::first-line{
        color: #333
      }
    }
  }
  .el-form-item {
    background: rgba(0, 0, 0, 0);
    border-radius: 2px;
    color: #333;
    &.code{
      .el-input input{
        padding-right: 85px;
      }
    }
    .codeClick{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #3381ff;
        font-size: 14px;
        padding-right: 12px;
        cursor: pointer;
        background-color: transparent;
        border: none;
        outline: none;
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background:url('https://51shanxiao.com//images/bg1.jpg');
  .el-button--primary{
    background-image: linear-gradient(90deg, 
		#4985e8 0%, 
		#3d87e1 58%, 
		#3088da 100%), 
	linear-gradient(
		#2d59ac, 
		#2d59ac);
	background-blend-mode: normal, 
		normal;
	border-radius: 2px;
  }
  .cont{
    width: 1200px;
    margin: auto;
    background-color: #ffffff;
    box-shadow: 0px 7px 27px 0px rgba(133, 169, 231, 0.51);
    border-radius: 20px;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 65vh;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    .lt{
      width: 50%;
      background: url(https://51shanxiao.com//images/bg_03.png) no-repeat center;
      background-size: cover;
      height: 100%;
      padding: 10% 5%;
      p{
        color: #ffffff;
        font-size: 14px;
        line-height: 24px;
        margin-top: 20px;
      }
      ul{
        padding-left: 0;
        list-style-type: none;
        margin-top: 2rem;
        li{
          font-size: 16px;
          color: #fff;
          padding: 5px 0;
          .svg-icon{
            margin-right: 10px;
            position: relative;
            top: 3px;
          }
          &:first-child{
            .svg-icon{
              top: 0
            }
          }
        }
      }
    }
    .rt{
      width: 50%;
      padding: 5% 8%;
    }
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .title-container {
    position: relative;
    .title {
      font-size: 25px;
      color: #0a6df9;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
      span{
        position: relative;
        display: inline-block;
        &::after{
          content: '';
          width: 34px;
          height: 2px;
          background-color: #0a6df9;
          position:absolute;
          top: 50%;
          left: -50px;
        }
        &:before{
          content: '';
          width: 34px;
          height: 2px;
          background-color: #0a6df9;
          position:absolute;
          top: 50%;
          right: -50px;
        }
      }
    }
    .set-language {
      color: #fff;
      position: absolute;
      top: 5px;
      right: 0px;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
  .fots{
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    p{
      color: #333333;
      font-size:14px;
      margin: 12px auto
    }
  }
}
</style>
